<template>

    <view class="orderPage allPage">

        <view class="headNav">

            <view class="fixed">

                <view class="ul">

                    <view class="ul-inside">

                        <view v-for="item,idx in titleNav" :key="idx" class="li" :class="{'active': idx == navIdx }" @click='switchTit(idx)'>{{item.name}}</view>

                        <view class="scroll-line transBg" :style="'left:'+ (navIdx * 33.33)+'%'    "></view>
                    </view>

                </view>
            </view>

        </view>


        <!-- //列表 -->
        <view class="list-box" >
            <view v-for="itemMo,idx in listData" :key="idx">

                <Ticket :listData='itemMo'></Ticket>
              
            </view>
 
            <view class="nolist" v-if="showNodata && total == 0">
                
                <no-data></no-data>

            </view>

            
              
        </view>


    </view>

</template>
<script>

const statusList = [{num:1,name:"未生效"},{num:2,name:"待使用"},{num:3,name:"已使用"},{num:4,name:"已过期"}]

const app = getApp();
import Ticket from '@/components/Ticket'
export default {
    components: { Ticket },
    data () {
        return {
            //status 1未生效 2待使用 3已使用 4已过期
            //滑动导航
            // menuArr: [{ name: '超市订单', 'color': '#1287fa' }, { name: '快递订单', 'color': '#1287fa' }],
            typeIdx: 0,
            titleNav: [
                { name: "全部", code: undefined },
                { name: "已生效", code: 2 },
                { name: "未生效", code: 1 },
            ],
            navIdx: 1,
           
            listData: [ ],
            orderStatus: '', //状态

            totalPage: 0,  //总页数
            showNodata: false,
            queryForm: {
                pageNum: 1, //第几页
                pageSize: 5,
                status: 2,
                userId:''
            },
            total: 0,
          
        }
    },
    onShow () {

        app.laterToken(bool => {

            app.logRecord('礼券列表')

            this.initPage()

        })


    },
    onLoad (option) {

       



    },
    methods: {
        initPage (cb) {

            this.showNodata = false

            if( !app.globalData.userId ){

                return

            }

            this.queryForm.userId = app.globalData.userId

            let requireUrl =  'flash/supermarket/coupon/page/list?loading' 

            this.$axios({ url: requireUrl, data: this.queryForm })
                .then(res => {

                    // console.log('哈哈哈哈', res)

                    let listData = res.data.map( item =>{
                        if(item.endTime){
                           item.endTimeShow =  item.endTime.split(' ')[0]
                        }
                        return item
                    })

                    this.$set(this.listData, this.queryForm.pageNum - 1, listData )

                    this.total = res.total

                    this.showNodata = true

                    cb && cb()
                })
        },
        switchTit (i) {

            if (i != this.navIdx) {

                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 10
                });

                this.listData = []

                this.queryForm.pageNum = 1
                this.queryForm.status = this.titleNav[i].code

                this.navIdx = i

                this.initPage()
            }
        },
         //下拉刷新
        onPullDownRefresh () {

            this.queryForm.pageNum = 1


            this.initPage(() => {
                uni.stopPullDownRefresh();//停止刷新
            })

        },
        onReachBottom () {
            console.log('触底了')

            if (this.queryForm.pageNum * this.queryForm.pageSize < this.total) {

                this.queryForm.pageNum += 1

                this.initPage()
            }

        },
        showCode(row){
            // console.log('哈哈哈哈', row)
            uni.showModal({
                title: '券码',
                content: row.seqNum,
                showCancel: false,
                confirmColor:'#ff305a',
                success:  (res)=> {
                    if (res.confirm) {

                    
                    }
                }
            });

        }

    }
}
</script>
<style lang="scss" scoped>
.allPage{
    min-height: 100vh;
    background: #fff;
}
.headNav {
    height: 100rpx;
    width: 100%;
    .fixed {
        box-sizing: border-box;
        position: fixed;
        height: 100rpx;
        background: #fff;
        border-bottom: 2rpx solid #eaeaea;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 10;
    }
    .types {
        height: 80rpx;
        padding: 10rpx 32rpx 0;
        box-sizing: border-box;
        text-align: center;
        .slider_box {
            display: inline-block;
            width: 100%;
        }
    }
}
.headNav .ul {
    padding: 0 80rpx;
    .ul-inside {
        position: relative;
        height: 80rpx;
        line-height: 80rpx;
        margin-bottom: 20rpx;
        box-sizing: border-box;
    }
    .scroll-line {
        position: absolute;
        bottom: 0;
        width: 33.33%;
        height: 4rpx;
        // background: #333;
        border-radius: 8px;
        z-index: 2;
        transition: all 0.2s;
    }
}
.headNav .li {
    box-sizing: border-box;
    display: inline-block;
    width: 33.33%;
    height: 100%;
    color: #d7d7d7;
    // border-bottom: 4rpx solid #fff;
    text-align: center;
    box-sizing: border-box;
    font-size: 28rpx;
    transition: all 0.3s;
}

.headNav .li.active {
    color: #333;
    // border-bottom: 4rpx solid #1989fa;
}
.list-box {
    padding: 20rpx 32rpx 60rpx;
}

.nolist {
    margin-top: 100rpx;
    text-align: center;
    font-size: 28rpx;
    color: #565656;
}

</style>